<script setup>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  onMounted,
  ref,
  nextTick,
} from "vue";

// import html2canvas from 'html2canvas';

import {
  CloseOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

// canvas 组件
import konvaCount from '@/views/shotstack/components/konvaCount/index.vue'
const konvaCountRef = ref()

// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";

// 花字选择框
import GraphicFloweSelect from './helpers/GraphicFloweSelect.vue'
const GraphicFloweSelectRef = ref()

// 素材列表
import GraphicTextCutMaterialList from './GraphicTextCutMaterialList.vue'
const GraphicTextCutMaterialListRef = ref()

// 每一个素材卡片组件
import GraphicTextCardItem from "./helpers/GraphicTextCardItem.vue";
const GraphicTextCardItemRef = ref()

// 图片查看弹窗
import viewImg from "@/views/shotstack/components/dialogComponent/viewImg.vue";
const viewImgRef = ref()

import { message } from "ant-design-vue";
// 封装的请求
import request from "@/common/utils/request";

import { isEmpty } from '@/common/utils/is.js'
import { useStore } from 'vuex'
// 仓库
const store = useStore();
// 工具
import GTC_tools from "@/views/shotstack/utils/helper.js";

const parentNode = ref()

// 仓库中的图文剪辑数据
const GraphicTextMixCutData = computed(() => {
    return store.state.GraphicTextMixCut.GraphicTextMixCutData;
});

// 字体列表
const fontList = computed(() => {
  return store.state.GraphicTextMixCut.fontList
});

// 花字列表
const flowerList = computed(() => {
  return store.state.GraphicTextMixCut.flowerList
});

// 获取当前模板的数据
const getCurrentData = () => {
    return GraphicTextMixCutData.value?.resource_data?.[state.index]
}
// 存放当前编辑的项
const setEditItem = (params) => {
  const { oldIndex, newIndex, init = false } = params

  // 不是初始化
  if (!init) {
    // 存放当前修改过的值
    state.texts[oldIndex] = JSON.parse(JSON.stringify(state.editItem))
    // 赋值新值
    state.editIndex = newIndex
    state.editItem = JSON.parse(JSON.stringify(state.texts[newIndex]))
    return state.editItem
  }

  state.editItem = JSON.parse(JSON.stringify(state.texts[state.editIndex]))
  return state.editItem
}

  const state = reactive({
    visible: false, //控制页面显示隐藏
    addVisible: false, //控制素材库组件显示隐藏
    // 手机组件 显示隐藏
    phoneVisible: false,
    // 字号数组
    fontSizeList: GTC_tools.getFsizeList(),
    // 当前的 图文剪辑项的 下标
    index: null,
    // 当前编辑的 标题组数据下标
    editIndex: 0,

/**
 * submit 需要进行保存 替换的数据 ===== start
 */
    // 当前的标题克隆数据
    texts: [],
    // 本组数据的 素材列表
    images: [],
    // 本组数据的贴纸列表
    stickers:[],
    // 图片模式
    image_tpl: '',
/**
 * submit 需要进行保存 替换的数据 ===== end
 */

    // 当前编辑的标题组数据
    editItem: null,
    // 手机组件的宽高
    pixel: null,
    // 当前修改的tab类型: 1:文案 2:模板
    activeKey: '1',
    img_template_list: GTC_tools.getGraphicImgTemplate(),

    // 图片的链接
    src: '',
  });

// 选择花字样式
const selectFontStyle = (params) => {
  /**
   * @param {item:选择的花字数据, type:"main"主标题; "deputy"副标题;}
   */
  const { id, type = 'main' } = params
  if (type == 'main') {
    state.editItem.main.config.flower_id = id
  } else {
    state.editItem.deputy.config.flower_id = id
  }
  state.texts[state.editIndex] = JSON.parse(JSON.stringify(state.editItem))
}

// 添加副标题
const addSubTitle = () => {
  const subData = GTC_tools.getTextSub()
  console.log('subData', subData);
  state.editItem.deputy = subData
}
// 删除副标题
const delSubTitle = () => {
  state.editItem.deputy = null
}

// 添加标题组
const addTitle = () => {
  if (state.texts.length >= GTC_tools.GraphicTextCut_maxTitleLength) {
    return message.error(`最多只能添加${GTC_tools.GraphicTextCut_maxTitleLength}个标题`);
  }
  const item = GTC_tools.getTextsItem()
  state.texts.push(item)

  setEditItem({
    oldIndex: state.editIndex,
    newIndex: state.texts.length - 1,
  })
}

// 切换标题组
const changeTab = (index) => {
   setEditItem({
    oldIndex: state.editIndex,
    newIndex: index,
  })
}

// 删除标题组
const delTitle = (index) => {
  const len = state.texts.length;
  // 如果删除的是高亮的项或者更后面的项
  if (index <= state.editIndex) {
    // 如果删除的是最后一项，活动项变为新的最后一项
    if (index == len-1) {
      state.editIndex = index - 1;
    } else if (state.editIndex > index) {
      // 如果删除的是高亮项之前的项，活动项索引减一
      state.editIndex--;
    }
  }

  state.texts.splice(index, 1)
  state.editItem = JSON.parse(JSON.stringify(state.texts[state.editIndex]))
}

// 更新 xy 位置信息
const update_position = (params) => {
  const {x,y, key} = params
  state.editItem[key].config.x = x
  state.editItem[key].config.y = y
  state.texts[state.editIndex] = JSON.parse(JSON.stringify(state.editItem))
  console.log(state.editItem,'更新了位置信息');
}

// 更新贴纸的 位置缩放等数据
const update_stickers = (stickers) => {
  // 更新 贴纸列表数据
  state.stickers = stickers
}

// 是否在初始化中
const renderIng = ref(false)
const image_tplChange = async(e) => {
  // 获取本项数据的宽高
  const pixel =  GTC_tools.getPixel(state.image_tpl)
  state.pixel = pixel
  renderIng.value = true
  nextTick(async() => {
    await konvaCountRef.value?.init()
    renderIng.value = false    
  })
}

// 字体改变
const handleFontChange = (e, key) => {
  console.log(e, '字体改变');
  const find = fontList.value.find((item) => {
    return item.id == e
  })
  find && (state.editItem[key].config.font = find.font_family)
  state.texts[state.editIndex] = JSON.parse(JSON.stringify(state.editItem))
}

// 增删素材
const updateMaterialList = (list) => {
  state.images = list
}

// const phoneStyle = (index) => {
  // const gridColumnCount = 3; // 每行的列数，这里固定为3
  //   const itemScale = 0.5; // 元素缩放比例
  //   const xOffsetPerItem = -295; // x轴方向每个元素的偏移量（基于缩放后尺寸考虑）
  //   const initialYOffset = -450; // 第一行元素在y轴方向的初始偏移量（基于缩放后尺寸考虑）
  //   const yOffsetIncrement = -700; // 每往下一行，y轴方向增加的偏移量（基于缩放后尺寸考虑）

  //   const rowIndex = Math.floor(index / gridColumnCount); // 计算当前元素所在的行数（从0开始计数）
  //   const colIndex = index % gridColumnCount; // 计算当前元素在当前行内的列数（从0开始计数）

  //   const xOffset = xOffsetPerItem * colIndex; // 根据列数计算x轴方向的偏移量
  //   const yOffset = initialYOffset + yOffsetIncrement * rowIndex; // 根据行数计算y轴方向的偏移量
    // return {
      // transform: `scale(${itemScale}) translate(${xOffset}px, ${yOffset}px)`,
      //   overflow:'hidden'
      // zoom:0.5
    // };
// }

  // 选择文件组件回调
  const cancel = (list) => {
  console.log(list, '选择的素材');
  if (isEmpty(list)) {
    state.addVisible = false;
    return
  }

  let filterList = list.map((item, index) => {
    return {
      // 文件
      material_url: item.material_url,
      // 文件名称
      material_name: item.material_name,
      // 素材类型
      scene_type: item?.material_type,
      // id
      org_id: item.org_id,
      // 文件时长
      material_duration: item.material_duration,
      // 文件后缀
      material_extension: item.material_extension,
      // 文件大小
      material_size: item.material_size,
      // 素材路径
      material_path: item.material_path,
      // 素材id
      material_id: item.id,
      // 文件路径
      url: item.material_url,
      // 阿里云需要使用的 media_id
      media_id: item?.oss_media_id || "",
      id: item.id,
      width: item?.width,
      height: item?.height,
      x: 0,
      y: 0,
      rotation:0,
      scaleX:1,
      scaleY:1
    };
  });

  // 这次添加的数据
  let nowDatas = []

  filterList.forEach(ele => {
    const findIndex = state.stickers.findIndex(item => item.id == ele.id)
    if (findIndex == -1) {
      state.stickers.push(ele)
      nowDatas.push(ele)
    }
  })

    state.addVisible = false;

    nextTick(() => {
      // 重新渲染贴纸数据      
      konvaCountRef.value?.renderStickers(nowDatas)
    })
};

// 素材图片预览
const toView = (data) => {
  console.log(data, '预览的图片');
  // 查看图片
  data?.material_url && viewImgRef.value.open(data.material_url);
};

// 素材删除
const delItem = (item) => {
  const findIndex = state.stickers.findIndex(ele => ele.id == item.id)
  if (findIndex != -1) {
    state.stickers.splice(findIndex, 1)
    nextTick(() => {
      // 将删除的贴纸进行删除
      konvaCountRef.value.delSticker(item)
    })
  }

}

const submit = () => {
  const target =  GraphicTextMixCutData.value?.resource_data?.[state.index]

  if (!target) {
    message.error('数据保存失败!')
    return
  }
    state.texts[state.editIndex] = JSON.parse(JSON.stringify(state.editItem))
    target.texts = state.texts
    target.image_tpl = state.image_tpl
    target.images = state.images
    target.stickers = state.stickers
    
    store.commit('GraphicTextMixCut/INIT_GRAPHICTEXT_DATA', GraphicTextMixCutData.value)
    onClose()
}

  // 打开弹窗
const showDrawer = (params) => {
  const { index } = params
  state.index = index
  state.editIndex = 0
  const current = getCurrentData()

  console.log(current, 'currentcurrentcurrent这一组数据');

  // 本项数据的图片模板格式
  state.image_tpl = current?.image_tpl

  // 获取本项数据的宽高
  const pixel =  GTC_tools.getPixel(state.image_tpl)
  state.pixel = pixel

  // 存放本项图文剪辑的 文案数据
  state.texts = JSON.parse(JSON.stringify(current?.texts))
  console.log(state.texts, 'image_tplimage_tpl');

  // 素材背景列表
  state.images = current.images
  // 贴纸列表
  state.stickers = current.stickers

  // 初始化 赋值当前编辑的项
  setEditItem({init:true})
  console.log(state.editItem,'state.editItem');

  state.visible = true;
  state.phoneVisible = true
};
    // 关闭弹窗
    const onClose = () => {
      state.visible = false;
    };
    defineExpose({
      showDrawer,
      onClose
    })

</script>

<template>
  <div class="GraphicTextEditDrawer" ref="parentNode">
    <a-drawer :getContainer="parentNode" 
    v-model:visible="state.visible"  
    class="custom-class" title="文案贴纸设置"
     placement="right" width="700"
      :maskClosable="false"
      :destroyOnClose="true"
      >
  
      <div class="content">

  <a-tabs v-model:activeKey="state.activeKey">

    <a-tab-pane key="1" tab="文案编辑">
      <div class="tab-content">
            <div v-for="(item, index) in state.texts" :key="index" 
            class="tab-card" 
            :class="{ activeTab: index == state.editIndex }" 
            @click="changeTab(index)"
            >
              <div class="tab-card-item">
                标题{{ index + 1 }}
              </div>
              <!-- state.texts.length -->
              <div v-if="state.texts.length > 1" class="tab-card-icons" @click.stop="delTitle(index)">
                <CloseOutlined />
              </div>
            </div>
            <!-- v-if="TitleArr.length < 5" -->
            <PlusOutlined  class="add_titleArr" @click="addTitle"
              style="margin: 13px 8px 0px 8px; font-size: 10px; color: #000" />
          </div>
          
        <div class="content_main_box" v-if="state.editItem">
          <!-- 主标题 -->
          <div>
            <div class="main_title_box title_box">
              <span class="mini_title">主标题:</span>
              <a-textarea v-model:value="state.editItem.main.content" placeholder="请输入主标题" :rows="3" />
            </div>
            <div class="font_configs_box">
              <div class="config_item">
                <span class="mini_title">字体:</span>
                <a-select
                  ref="select"
                  v-model:value="state.editItem.main.config.font_id"
                  style="width: 190px"
                  @focus="focus"
                  @change="$event => handleFontChange($event, 'main')"
                >
                <a-select-option v-for="item in fontList" :key="item.id" :value="item.id">
                  <span :style="{fontFamily: item.font_family}">{{ item.name }}</span>
                </a-select-option>
              </a-select>
              </div>
  
              <div class="config_item">
                <span class="mini_title">字号:</span>
                <a-select
                  ref="select"
                  v-model:value="state.editItem.main.config.font_size"
                  style="width: 190px"
                  @focus="focus"
                >
                <a-select-option v-for="item in state.fontSizeList" :value="item.value" :key="item.value">{{ item.lable }}</a-select-option>
              </a-select>
              </div>
              <!-- 花字选择组件 -->
              <GraphicFloweSelect ref="GraphicFloweSelectRef"
              :editItem="state.editItem"
              useKey="main"
              :activeFlower="state.editItem.main.config.flower_id"
              @updateFlowerId="$event => selectFontStyle({ id: $event, type: 'main' })"
              ></GraphicFloweSelect>
            </div>
          </div>
  
          <div class="is_line"></div>
          <!-- 副标题 -->
  
          <template v-if="!state.editItem.deputy">
            <a-button type="dashed" style="width: 100%;" @click="addSubTitle"><span style="font-size: 14px; color: #555;">添加副标题</span></a-button>
          </template>
          <template v-else>
            <div>
              <div class="main_title_box title_box">
                <span class="mini_title">副标题:</span>
                <div style="display: flex; align-items: center; gap: 20px;">
                  <a-textarea v-model:value="state.editItem.deputy.content" placeholder="请输入副标题" :rows="3" />
                  <a-button type="primary" @click="delSubTitle">删除</a-button>
                </div>
              </div>
              <div class="font_configs_box">
                <div class="config_item">
                  <span class="mini_title">字体:</span>
                  <a-select
                    ref="select"
                    v-model:value="state.editItem.deputy.config.font_id"
                    style="width: 190px"
                    @focus="focus"
                    @change="$event => handleFontChange($event, 'deputy')"
                    >
                  <a-select-option v-for="item in fontList" :key="item.id" :value="item.id">
                  <span :style="{fontFamily: item.font_family}">{{ item.name }}</span>
                  </a-select-option>
                </a-select>
                </div>
                <div class="config_item">
                  <span class="mini_title">字号:</span>
                  <a-select
                    ref="select"
                    v-model:value="state.editItem.deputy.config.font_size"
                    style="width: 190px"
                    @focus="focus"
                  >
                  <a-select-option v-for="item in state.fontSizeList" :value="item.value" :key="item.value">{{ item.lable }}</a-select-option>
                  </a-select>
                </div>
                <GraphicFloweSelect ref="GraphicFloweSelectRef"
              :editItem="state.editItem"
              useKey="deputy"
              :activeFlower="state.editItem.deputy.config.flower_id"
              @updateFlowerId="$event => selectFontStyle({ id: $event, type: 'deputy' })"
              ></GraphicFloweSelect>
              </div>
            </div>
          </template>

          <!-- 
          testImg
           -->
          <!-- <img :src="state.src" style="height: 400px; width: 400px; object-fit: contain;" alt=""> -->
        </div>
    </a-tab-pane>

    <a-tab-pane key="3" tab="贴纸">
      <div class="sticker_box">
        <div class="sticker_item" @click="state.addVisible = true">
          <div class="sticker_desc">
            <div style="font-size: 24px; font-weight: 600">+</div>
            <div>添加贴纸</div>
          </div>
          <div class="sticker_img_mask">
            <!-- <span class="sticker_img-local" @click="popularMaterialHandle"><upload-outlined />热门素材</span>
            <span class="line"></span> -->
            <span class="sticker_img-origin" @click="state.addVisible = true"><download-outlined />素材库导入</span>
          </div>
        </div>

        <GraphicTextCardItem
          v-for="item in state.stickers"
          :key="item.id"
          :item="item" 
          @delItem="delItem" 
          @toView="toView" 
          @repaint="repaint" 
          :viewMore="false"
          >
        </GraphicTextCardItem>
      </div>
    </a-tab-pane>
    
    <a-tab-pane key="2" tab="图片模板" force-render>
      <div class="img_template_content" >
                <a-radio-group v-model:value="state.image_tpl" 
                @change="image_tplChange"
                :disabled="renderIng"
                class="radio_group">
                    <a-radio class="radio_item" v-for="item in state.img_template_list" :key="item.value" :value="item.value">
                        <div class="radio_content">
                            <div class="left">
                                <span class="title">{{ item.name }}</span>
                                <span class="dec">{{ item.dec }}</span>
                            </div>
                            <div class="right">
                            <img :src="item.img" alt="">
                            </div>
                        </div>
                    </a-radio>
                </a-radio-group>
            </div>
    </a-tab-pane>



    <!-- <a-tab-pane key="3" tab="素材管理">
      <GraphicTextCutMaterialList ref="GraphicTextCutMaterialListRef"
      :images="state.images"
      @updateMaterialList="updateMaterialList"
      />
    </a-tab-pane> -->

  </a-tabs>
  
      </div>

      <div class="phone_box">

        <konvaCount ref="konvaCountRef"
          :editItem="state.editItem"
          :pixel="state.pixel"
          :images="state.images"
          :stickers="state.stickers"
          :image_tpl="state.image_tpl"
          @update_position="update_position"
          @update_stickers="update_stickers"
        ></konvaCount>

        <!-- 手机组件 state.texts
                style="transform: scale(0.7) translate(-50%, -15%);"
        -->
        <!-- <Phone ref="PhoneRef" 
        :phoneVisible="state.phoneVisible"
        :visible="state.visible"
        :editItem="state.editItem"
        :pixel="state.pixel"
        :images="state.images"
        :image_tpl="state.image_tpl"
        @update_position="update_position"
        v-for="(ele, index) in state.texts"
        :key="index"
        style="zoom: 0.5;"
        > 
      </Phone> -->
      </div>
      <template #footer>
        <a-row type="flex" justify="end">
          <a-button style="margin-right: 8px" type="primary" @click="submit">确定</a-button>
          <a-button @click="onClose">取消</a-button>
        </a-row>
      </template>
    </a-drawer>
  </div>

      <!-- 素材库导入 -->
      <ChooseMaterial :haveTags="[
      {
        name: '网络素材',
        key: 'system_materials',
      }
    ]" useType="视频背景" 
    :isClip="false" material_type="image" 
    :visible="state.addVisible" @close="cancel" 
    :multiple="true" />

      <!-- 图片预览弹窗 -->
  <viewImg ref="viewImgRef"></viewImg>
</template>

<style lang="less" scoped>
  @cart_bgc: #f1f3f5;

.GraphicTextEditDrawer{
  :deep(.ant-drawer-content){
    &::-webkit-scrollbar {
    display: none;
  }
  }

}

  .content{

// tab栏样式
.tab-content {
  margin-top: 12px;
  padding-bottom: 5px; // height: 36px;
  display: flex;
  position: relative;
  overflow-x: auto;
  margin-bottom: 20px;

  &::-webkit-scrollbar {
    width: 8px;
    /* 滚动条的宽度 */
    height: 6px;
    /* 滚动条的高度，垂直滚动条可能用得上 */
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    /* 滑块的背景颜色 */
    border-radius: 10px;
    /* 滑块的圆角 */
  }

  &::after {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #e8e8e8;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .tab-card {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background-color: #f5f7f9;
    padding: 7px 16px;
    color: #5e5e5e;
    margin-right: 10px;
    box-shadow: inset 0 1px 0 #e8e8e8, inset -1px 0 0 #e8e8e8,
      inset 1px 0 0 #e8e8e8;
    cursor: pointer;
    text-wrap: nowrap;

    :hover {
      // color: #fd5859 !important
      color: var(--ss-primary-color-active) !important;
    }

    .tab-card-icons {
      font-size: 10px;
      margin-top: 4px;
    }
  }

  .activeTab {
    color: var(--ss-primary-color-active) !important;
    background-color: #fff !important;
  }
}

// 部分 公共样式
.mini_title{
  font-size: 13px;
  color: #777;
}

.content_main_box{

  .is_line{
    width: 100%;
    height: 1px;
    background-color: #eee;
    margin: 20px 0;
  }

  .title_box{
    display: flex;
    flex-direction: column;
    gap:5px;
    margin-bottom: 20px;
  }

  .font_configs_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .config_item{
      display: flex;
      flex-direction: column;
      gap:5px;

    .effect {
      border:1px solid #d9d9d9;
      transition: all 0.3s;
      width: 190px;
      height: 31px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover{
        border-color: #5297ff;
      }

      .font_select_style{
        font-size: 15px;
        margin: 0;
        font-weight: 900;
        line-height: 1.6;
      }
    }

    // 花字列表样式
// 花字设置
.font_style_box {
  width: 600px;
  max-height: 400px;
  overflow-y: auto;

  &::-webkit-scrollbar {
      width: 8px; /* 滚动条的宽度 */
      height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
  }

.font_style_content_box {
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;



  .font_style_content_item {
    border: 2px solid #ededee;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;

    .font_img{
      width: 200px;
      height: 51px;
      object-fit: contain;
    }

    &:hover {
      border-color: #1664ff;
      background-color: #e8f7ff;
    }

    .font_style_content_item_text {
      width: 51px;
      font-size: 20px;
      line-height: 51px;
      text-align: center;
      margin: 0;
      font-weight: 900;
    }
  }

  .active_font_style {
    border-color: #1664ff;
  }
}

  // 禁用
  .font_disabled {
    width: 51px;
    font-size: 32px;
    text-align: center;
  }


// 折叠按钮
.folding_panel {
  color: #737a87;
  text-align: center;
  width: 100%;
  display: block;
  cursor: pointer;
  margin-top: 15px;
}
}

    }

  }


}


//  图片模板样式
.img_template_content{

.radio_group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;

    .radio_item{

        .radio_content {
            width: 290px;
            display: flex;
            justify-content: space-between;
            gap: 10px;
            
            .left{
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 5px;
                .dec{
                    color: #777;
                }
                .title{
                    font-size: 15px;
                }
            }

            .right{
                height: 100%;
                width: 50px;
                img{
                    object-fit: cover;
                }
            }



        }
    }
}

}

// 添加贴纸样式
.sticker_box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));  
  gap: 8px 0;  

  .sticker_item{
    width: 84px;
      height: 120px;
      border-radius: 5px;
      position: relative;
      margin: 0 5px;

      &:hover {
        & .sticker_img_mask {
          opacity: 1;
        }
      }

      .sticker_img_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 84px;
        height: 114px;
        background: #f1f3f5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;

        .sticker_img-local,
        .sticker_img-origin {
          align-items: center;
          justify-content: center;
          display: flex;
          height: 48%;
          font-size: 12px;
        }

        .line {
          height: 1px;
          width: 80%;
          background: #dde2e9;
        }

        & span {
          cursor: pointer;

          &:hover{
            color: var(--ss-primary-color-hover);
          }
        }
      }

      // 鼠标触摸之前的描述文本
      .sticker_desc {
        background: @cart_bgc;
        width: 84px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
  }

}
  }

  // 手机组件容器
.phone_box{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: calc(100vw - 700px);
  padding: 50px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;

  &::-webkit-scrollbar {
      display: none;
  }

}
</style>
